<template>
<q-layout view="lHh Lpr lFf">
    <q-header>
        <q-toolbar class="row" style="height: 50px">
          <div :class="$platform.inDesktop()?'col-3':'col-6'" class="row">
            <q-img src="~assets/icons/一方映画logo200708竖版亮色.png" :width="$q.platform.is.mobile ? '150px' : '200px'" contain />
            <!-- <h6 class="q-ml-md q-mr-md ellipsis desktop-only">OA系统</h6> -->
          </div >



            <q-tabs :class="$platform.inDesktop()?'col-6':''" inline-label class=" text-white desktop-only" v-model="tab" align="center">
                <q-route-tab icon="fas fa-home" to="/" name="home" label="项目首页" />

                <q-route-tab v-if="!isWechat" icon="fab fa-buffer" to="/app" name="application" label="应用" />
                <q-route-tab icon="fas fa-user" to="/user" name="personal" label="个人中心" />
            </q-tabs>
            <div :class="$platform.inDesktop()?'col-3':'col-6'" class="row items-center justify-end">
              <q-btn flat size="14px" dense icon="mdi-calendar-month-outline" />
              <q-btn flat size="14px" dense icon="menu" />
              <div class="column flex-center" style="height:50px">
                  <q-separator vertical spaced style="height:50%" color="grey-2 "></q-separator>
              </div>

              <q-avatar size="30px" v-if="user.avatar">
                  <img :src="user.avatar" />
                  <q-menu content-class="bg-grey-9 text-white" anchor="bottom right" self="top right" :offset="[0,10]">
                      <q-card flat class="transparent no-border q-py-none">
                          <q-card-section class="row items-center q-py-sm">
                              <q-avatar size="25px" class="q-mr-sm" v-if="user.avatar">
                                  <img :src="user.avatar" />
                              </q-avatar>
                              {{user.username}}<span :class="user.isQw?'text-orange-4':'text-green-6'">@{{user.isQw?'一方映画':'微信'}}</span>
                          </q-card-section>

                      </q-card>
                      <q-item v-if="$platform.inMiniProgram() ||$platform.inWechat()  " @click="handleToUserCenter" dense clickable>
                          <q-item-section>个人中心</q-item-section>
                      </q-item>
                      <q-separator inset color="grey-4"></q-separator>
                      <q-item dense clickable @click="handleLogout">
                          <q-item-section>退出登录</q-item-section>
                      </q-item>
                  </q-menu>
              </q-avatar>
            </div>


        </q-toolbar>
    </q-header>
    <q-page-container >
        <router-view :user="user"/>
    </q-page-container>
    <q-footer v-if="!$platform.inWechat()" bordered class="mobile-only bg-white text-primary my-footer-tabbar">
        <q-tabs :breakpoint="600" stretch active-color="primary" class="text-grey" align="center" v-model="tab">
            <q-route-tab style="width:200px" icon="fas fa-home" to="/" name="home" label="项目首页" />
            <q-route-tab icon="fab fa-buffer" to="/app" name="application" label="应用" style="width:200px" />
            <q-route-tab icon="fas fa-user" style="width:200px" to="/user" name="personal" label="个人中心" />
        </q-tabs>
    </q-footer>
</q-layout>
</template>

<script>

import {
    removeItem,
    getItem
} from "assets/utils/storage";
export default {
    name: "MainLayout",
    data() {
        return {
            tab: "home",
            user: {
              isQw:true
            },
            isWechat: false,
        };
    },
    created() {
        this.loadUserInfo();

    },
    mounted() {
        if (window.__wxjs_environment === 'miniprogram') {
            this.isWechat = true;
        };
        setTimeout(()=>{
          this.handleUserRight();

        },1000)


    },
    methods: {
        handleadmin() {
            let token = getItem('user');
            let routeUrl = 'http://admin.yfyh.cc?access_token=' + token.token;
            window.open(routeUrl, "_blank");
        },
        loadUserInfo() {
            this.user = this.$storage.getItem('userinfo');
            this.handleUserRight();

        },
        handleToUserCenter() {
            this.$router.push("/user");
        },
        //设置用户权利
        handleUserRight() {
            let user = this.user;
            //permission 用户项目权限（1-仅查看；2-可上传；3-可编辑；4-管理员；5-创建者）
            console.log('permission',user);

            if (user.openid != undefined && user.openid.length > 0) {
                //微信用户

                // this.user.right=item.permission;
                this.user.isQw = false;

            }
            if (user.eid != undefined && user.eid > 0) {
                //企微用户

                // this.user.right=item.permission;
                this.user.isQw = true;

            }

        },
        handleLogout() {
            this.$q
                .dialog({
                    title: "提示",
                    message: "确认退出登录吗？",
                    cancel: true,
                    persistent: true,
                })
                .onOk(() => {
                    removeItem("user");
                    removeItem("userinfo");
                    this.$router.push("/login");
                    this.$q.notify({
                        color: "light-green-4",
                        icon: "far fa-check-circle",
                        position: "top",
                        textColor: "white",
                        message: "退出成功！",
                        timeout: "1500",
                    });
                })
                .onOk(() => {
                    // console.log('>>>> second OK catcher')
                })
                .onCancel(() => {
                    // console.log('>>>> Cancel')
                })
                .onDismiss(() => {
                    // console.log('I am triggered on both OK and Cancel')
                });
        },
    },
};
</script>

<style lang="scss">
.logo-img {
    height: 60px;
    max-width: 180px;
    margin-left: 20px;
}

.my-footer-tabbar .q-tab {
    height: 60px;
}
</style>
